//
import * as React from "react";
import * as GoldenLayout from "golden-layout";
//
import * as mvc from "common/mvc";
//
import * as dbtps from "../../types";
import { BaseView } from "../../base";
import Document from "../../model/document";
import StageComponent from "../stage";
/**
 * 文档视图。
 */
class DocumentView extends BaseView<Document, DocumentComponent> {
    protected _initialize(): void {
        const dbtps = this.application.dbtps; // 初始化问题
        // 文档布局初始化。
        const documentItem = this.component.props.layout.root.getItemsById(this.model.id)[0];
        console.assert(documentItem != null);
        const documentItemContainer = (documentItem as any)["container"] as GoldenLayout.Container; // GoldenLayout 的 types 与 js 不一致。。。
        // 将布局的状态同步到数据。
        documentItemContainer.tab.titleElement.on("click", () => {
            this.application.currentDocument = this.model;
        });
        documentItemContainer.on("show", () => {
            this.model.stage.visible = true;
        });
        documentItemContainer.on("hide", () => {
            this.model.stage.visible = false;
        });
        documentItemContainer.on("resize", () => {
            if (documentItemContainer.width !== 0 && documentItemContainer.height !== 0) {
                const stageWidth = this.model.stage.width;
                const stageHeight = this.model.stage.height;
                this.model.stage.width = documentItemContainer.width;
                this.model.stage.height = documentItemContainer.height;
                if (
                    stageWidth !== 0 && stageHeight !== 0
                ) {
                    this.model.stage.x = this.model.stage.width * this.model.stage.x / stageWidth;
                    this.model.stage.y = this.model.stage.height * this.model.stage.y / stageHeight;
                }
            }
        });
        this.application.currentDocument = this.model;
        this.model.stage.visible = true;
        this.model.stage.width = documentItemContainer.width;
        this.model.stage.height = documentItemContainer.height;
        this.model.stage.x = this.model.stage.width * 0.5;
        this.model.stage.y = this.model.stage.height * 0.5;
        // 添加舞台组件。
        const stageComponent = new StageComponent(this.model);
        this.component.refs.content.appendChild(stageComponent.view);
    }

    private _modelNotificationHandler(notification: dbtps.Notification): void {
        if (this.model !== notification.target) { // 过滤无关的通知。
            return;
        }

        const dbtps = this.application.dbtps; // 初始化问题
        switch (notification.type) {
            case dbtps.MNotificationType.None:
                break;
        }
    }
}
/**
 * 文档组件。
 */
export default class DocumentComponent extends React.Component<{ model: Document, layout: GoldenLayout }, any> {
    refs: {
        content: HTMLDivElement
    };

    componentDidMount() {
        setTimeout(() => { // GoldenLayout 的事件混乱
            // 注册视图。
            const view = DocumentView.create(DocumentView);
            view.initialize(this.props.model, this);
        }, 300);
    }

    render() {
        return (
            <div style={{ width: "100%", height: "100%" }}
                ref="content"
                >
            </div>
        );
    }
}